{template header common}
<script type="text/javascript" src="{SKIN_PATH}statics/js/goods_detail.js?v={HD_VERSION}"></script>
	<script type="text/javascript">
		mui.init();
	    var goods = {
		    "spu_id"      : "{$goods[spu_id]}",
		    "sku_id"      : "{$goods[sku_id]}",
		    "number" 		  : "{$goods[number]}",
		    // 促销类型
		    "prom_type"   :"{$goods[prom_type]}"
		};
		var theme_path = "{THEME_PATH}";
    </script>

	<div class="hd-detail-content">
		<div id="hd_detail">
			<div id="head_wrap" class="hd-scroll-wrapper">
				<div class="hd-scroller padding-bottom">
					<div class="mui-slider bg-white">
					    <div class="mui-slider-group">
					    	{loop $img_list $img}
						        <div class="mui-slider-item">
						            <a href="javascript:;"><img src="{$img}"></a>
						        </div>
							{/loop}
					    </div>
					    <div class="mui-slider-indicator">
					    	{loop $goods[img_list] $k $img}
					        	<div class="mui-indicator {if $k == 0}mui-active{/if}"></div>
							{/loop}
					    </div>
					</div>
					<div class="basic-info list-col-10 margin-none mui-clearfix">
						<p class="pro-title text-black">{$goods[sku_name]}</p>
						<div class="pro-act act-link lh-18" style="color:<?php echo $goods['style'] ? $goods['style'] : '#000'?>">
							{$goods[subtitle]}
						</div>
						<div class="pro-price hd-h3">
							<span class="price-org">交易价格：￥{$goods['real_price']}</span>
						</div>
                        <p>
                        <p class="margin-small-top">选购规格：
                        {loop $spec $s}
                        <em>{$s['value']}</em>
                        {/loop}
                        </p>
                        </p>
                        <p class="margin-small-top"><h4>您现在查看的是订单快照，该商品已被重新编辑。</h4></p>
                        <p class="margin-small-top"><a style="color: red" href="{url('detail',array('sku_id'=>$info['sku_id']))}">点此查看最新商品详情</a></p>
					</div>
					<div class="list-col-10 guess-like">
						<span class="title">猜您喜欢</span>
						<div class="mui-slider margin-small-top">
							{hd:goods tagfile="goods" method="lists" num="15" order="rand()"}
						    <div class="mui-slider-group">
						        <div class="mui-slider-item">
						            <ul class="hd-grid">
										{loop $data $n $r}
											<?php ++$n; ?>
							            	<li class="hd-col-xs-e5">
							            		<a class="pic square-pic" href="{url('goods/index/detail',array('sku_id'=>$r['sku_id']))}"><img src="{SKIN_PATH}statics/images/square_seat.png" style="background-image: url({thumb($r['thumb'])});" /></a>
							            		<div class="name">
							            			<a href="{url('goods/index/detail',array('sku_id'=>$r['sku_id']))}">{$r['name']}</a>
							            		</div>
							            		<p class="price">￥{$r['prom_price']}</p>
							            	</li>
							            	{if ($n % 5 == 0 && $n != 15)}
						            </ul>
						        </div>
						        <div class="mui-slider-item">
						            <ul class="hd-grid">
						            	{/if}
										{/loop}
						            </ul>
						        </div>
						    </div>
							{/hd}
						</div>
					</div>
					<div class="detail-tips">
						<p class="mui-text-center">继续拖动，查看详情</p>
						<p class="mui-text-center padding-bottom"><em class="mui-icon mui-icon-arrowup"></em></p>
					</div>
				</div>
			</div>
			<div id="bottom_wrap" class="hd-scroll-wrapper">
				<div class="hd-scroller">
					<div class="pulldown">
						<p class="mui-text-center">继续下拉，返回商品简介</p>
					</div>
					<div class="goods-intro">
						<div id="detail" class="mui-control-content goods-detail mui-active">
							{$goods[content]}
						</div>
				       	<div id="comment" class="mui-control-content goods-evaluate">
				            <div class="top mui-clearfix">
				            	<span class="mui-pull-left">只有购买过该商品的用户才能评论</span>
				            	<span class="mui-btn mui-btn-primary mui-pull-right comment_btn" data-url="{urlencode($_SERVER['REQUEST_URI'])}">我要评论</span>
				            </div>
				          	<ul class="comment-lists margin-none padding-lr list-col-10 mui-clearfix">

							</ul>
							<a class="top mui-block border-bottom mui-text-center text-black more" href="javascript:;" data-mark="comment">点击查看更多</a>
				        </div>
				        <div id="consult" class="mui-control-content goods-consult">
				            <div class="top mui-clearfix">
				            	<span class="mui-pull-left">对商品有任何疑问可在线咨询</span>
				            	<a class="mui-btn mui-btn-primary mui-pull-right" href="<?php echo url('goods/consult/add',array('sku_id'=>$_GET['sku_id']))?>">我要咨询</a>
				            </div>
				            <ul class="comment-lists margin-none padding-lr list-col-10 mui-clearfix"></ul>
				            <a class="top mui-block border-bottom mui-text-center text-black more" href="javascript:;" data-mark="consult">点击查看更多</a>
							<!--<div class="user-list-none mui-text-center">
								<img src="{SKIN_PATH}statics/images/ico_34.png" />
								<p class="text-black hd-h4 margin-top">没有查询到记录</p>
							</div>-->
				        </div>
				    </div>
				</div>

				<div id="detail-nav" class="mui-row bg-white padding-lr">
					<span class="mui-col-xs-4 active" data-scroll="0"><a href="javascript:;" data-id="detail">商品详情</a></span>
				    <span class="mui-col-xs-4" data-scroll="0"><a href="javascript:;" data-id="comment">商品评价</a></span>
				    <span class="mui-col-xs-4" data-scroll="0"><a href="javascript:;" data-id="consult">商品咨询</a></span>
				</div>
			</div>
		</div>
	</div>

	<div id="spec" class="hd-cover">
		<div class="body">
			{loop $goods['specs'] $specs}
				{if !is_null($specs['id'])}
				<dl class="goods-spec-item">
					<dt>{$specs['name']}：</dt>
					<dd>
						{loop explode(',',$specs['value']) $k $spec}
							<label data-id="{$specs['id']}" data-name="{$specs['name']}" data-value="{$spec}">{$spec}</label>
						{/loop}
					</dd>
				</dl>
				{/if}
			{/loop}
			<div class="padding-left-15 padding-right-15 padding-big-bottom">
				<h2 class="border-top padding-tb">数量</h2>
				<div class="number mui-clearfix">
					<button class="num-btn num-decrease disabled">-</button>
    				<input class="num-input" type="number" data-max="<?php echo $goods['number'] ? $goods['number'] : 1?>" value="1" />
    				<button class="num-btn num-increase">+</button>
				</div>
			</div>
		</div>
		<div class="summary">
			<div class="img">
				<img src="{$goods[thumb]}" />
			</div>
			<div class="main">
				<span class="text-org mui-h4">￥<em>{$goods['prom_price']}</em></span>
				<div class="hd-h5 margin-small-top"><span class="stock">库存 <em>{$goods['number']}</em>件</span></div>
			</div>
			<a class="close mui-icon mui-icon-plus"></a>
		</div>
		<div class="option">
		{if $goods[number] > 0}
			<button class="mui-btn mui-btn-primary full hd-h4 radius-none">确定</button>
		{else}
			<button class="mui-btn mui-btn-primary full hd-h4 radius-none disabled">商品已售罄</button>
		{/if}
		</div>
	</div>
	<div class="cover-decision"></div>
	<div class="comment-slider hide">
		<div class="mui-slider">
		    <div class="mui-slider-group"></div>
		</div>
	</div>
	<script type="text/javascript" src="{SKIN_PATH}statics/js/detail.js"></script>
</body>
</html>

<script type="text/javascript">
	var product_json = <?php echo json_encode($goods['sku_arr'])?>;
	var sku_obj = <?php echo $goods['spec'] ? $goods['spec'] : "[]";?>;
	var sku_json = "<?php echo $goods['spec_str']?>";
	var sku_id = "<?php echo $goods['sku_id']?>";
	//加入收藏
	mui(".foot-bar").on('tap','.collect-btn',function(){
		var $_this = $(this);
		var _this = $(this).find('.mui-icon');
		var url = "<?php echo url('member/favorite/delete')?>";
		if($_this.hasClass('cancel_favorite')){
			$.post(url,{sku_id:sku_id},function(ret){
				if(ret.status == 1){
					$('.collect-btn img').attr('src','{SKIN_PATH}statics/images/ico_35.png');
					$('.collect_text').text('收藏');
					$_this.removeClass('cancel_favorite');
				}else{
					return false;
				}
			},'json');
		}else{
			var url = "?m=member&c=favorite&a=add";
			var sku_price = _this.attr('data-price');
			var url_forward =  _this.data('url');
			$.post(url,{sku_id:sku_id,sku_price:sku_price,url_forward:url_forward},function(data){
				if(data.status == 1){
					$('.collect-btn img').attr('src','{SKIN_PATH}statics/images/ico_35a.png');
					$('.collect_text').text('取消收藏');
					$_this.addClass('cancel_favorite');
				}else{
					$.tips({
						content:data.message,
						callback:function() {
							if(data.message == '请登录后操作'){
								window.location.href = data.referer;
							}
						}
					});
				}
			},'json');
		}
	});
	//评价商品
	mui("#detail_body").on('tap','.comment_btn',function(){
		var url_forward = $(this).data('url');
		var comment = "<?php echo url('comment/index/ajax_comment_index')?>";
		$.get(comment,{url_forward:url_forward},function(ret){
			if(ret.status == 0) {
				$.tips({
					content:ret.message,
					callback:function() {
						window.location.href = ret.referer;
					}
				});
			}else{
				window.location.href = ret.referer;
			}
		},'json')
	})
	var detail = new hdTouch();

	$(function(){

		var page = {
	        comment : 1,
	        consult : 1
	    };
	    var cart_nums = 0;
		goods_detail.init();
		$('.mui-control-item').on('tap','a',function(){
			var obj = $(this).data('id');
			$(".goods-intro .mui-control-content").removeClass("mui-active");
			$("#"+obj).addClass("mui-active");
		})
		mui('.option').on('tap','.mui-btn',function(){
			if(!$(this).hasClass('disabled')){
				var url = window.location.href;
				var strCart = new RegExp('#cart'),
					strBuy = new RegExp('#buy');
				if(strCart.test(url)){
		    		goods_detail.cart_add();
				}else if(strBuy.test(url)){
					goods_detail.buy_now($('#buy'));
				}
			}
	   	});
		mui("#detail-nav").on('tap','span',function(e){
			$.each($("#detail-nav").children("span"), function() {
				if($(this).hasClass("active")){
					var matrix = $("#detail-nav").prev().css('-webkit-transform').split(")")[0].split(", ")
					$(this).data("scroll", parseFloat(Math.round(matrix[5])));
				}
			});
			detail._slideTo(document.getElementById("bottom_wrap").children[0], $(this).data('scroll'), 0);
			var _id = $(this).children("a").data("id");
			$(this).addClass("active").siblings().removeClass("active");
			$(".goods-intro .mui-control-content").removeClass("mui-active");
			$('#'+_id).addClass("mui-active");
		});
		mui(".mui-control-content").on('tap','.more',function(){
	    	//add_more();
	    	var mark = $(this).data("mark");
	    	loadLists(mark);
	    })

		function loadLists(mark){
			if(mark==''||mark==undefined||!mark) return false;
	    	if(mark=="comment"){
				$.getJSON('?m=comment&c=index&a=ajax_comment', {
	            	spu_id : goods.spu_id,
	            	page : page.comment,
	            	limit : 5,
	            }, function(ret) {
	            	if(ret.lists && ret.lists!=undefined) {
	            		$.each(ret.lists,function(i,item){
	            			//item.imgs图片名称
	            			var reply_content = ''
	            			if(this.reply_content){
		            			reply_content = '<div class="admin-text">'
											+'		<p><span class="text-blue">商家回复：</span>'
											+ 		this.reply_content
											+'		</p>'
											+'	 </div>'
	            			}
	            			var imgs_html = '';
	            			if(item.imgs.length>0){
	            				var imgs = '';
	            				$.each(item.imgs, function() {
	            					imgs += '<span><img src="'+this+'"/></span>';
	            				});
	            				imgs_html += '<div class="comment-imgs mui-clearfix drag-box">'+imgs+'</div>';
	            			}
	            			var content = '<li data-id="'+this.id+'">'
										+'	<div class="full">'
										+'		<span class="head"><img src="'+this.avatar+'" /></span>'
										+'		<span>'+this.username+'</span>'
										+'	</div>'
										+'	<div class="user-text">'
										+'		<p>'+this.content+'</p>'
										+'	</div>'
										+	imgs_html
										+	reply_content
										+'	<p class="hd-h6 text-gray">'+this._datetime+'</p>'
										+'</li>';
							$('#comment .comment-lists').append(content);
	            		})
	            	}
	            	if(ret.lists&&ret.lists.length>=5){
	            		page.comment++;
	            	}else{
	            		$("#"+mark).find(".more").html("没有更多了");
	            		$("#"+mark).find(".more").data("mark","");
	            	}
	            });
			}
			if(mark=="consult"){
				$.getJSON('?m=goods&c=index&a=get_consult', {
	            	spu_id : goods.spu_id,
	            	page : page.consult,
	            	limit : 5,
	            }, function(ret) {
	            	if(ret.lists && ret.lists!=undefined) {
	            		$.each(ret.lists,function(i,item){
	            			var reply_content = '';
	            			if(this.reply_content){
	            				reply_content ='	<div class="admin-text">'
												+'		<p><span class="text-blue">商家回复：</span>'+ this.reply_content +'</p>'
												+'	 	</div>'
	            			}
	            			var content = '<li data-id="'+this.id+'">'
										+'	<div class="full">'
										+'		<span class="head"><img src="" /></span>'
										+'		<span>'+this.username+'</span>'
										+'	</div>'
										+'	<div class="user-text">'
										+'		<p>'+this.question+'</p>'
										+'	</div>'
										+ 	reply_content
										+'	<p class="hd-h6 text-gray">'+this._datetime+'</p>'
										+'</li>';
							$('#consult .comment-lists').append(content);
	            		})
	            	}
	            	if(ret.lists&&ret.lists.length>=5){
	            		page.consult++;
	            	}else{
	            		$("#"+mark).find(".more").html("没有更多了");
	            		$("#"+mark).find(".more").data("mark","");
	            	}
	            });
			}
		}

		loadLists("comment");
		loadLists("consult");

	});
	$(".number").numberSet();

	mui("#comment").on('tap','.comment-imgs span',function(){
		var imgs =  $(this).parent(".comment-imgs").find("img");
		var lists = '';
		var index = $(this).index();
		$.each(imgs, function() {
			lists += '<div class="mui-slider-item"><img src="'+$(this).attr("src")+'" /></div>'
		});
		$(".comment-slider").removeClass("hide").find(".mui-slider-group").html(lists);
		mui('.comment-slider').slider().gotoItem(index);
	});

	mui(".comment-slider").on('tap','.mui-slider-item',function(){
		$(".comment-slider").addClass("hide");
	});

</script>